<template>
    <view class="components-bill-content-container" v-if="flag">
		<!-- scroll-view 解决弹框中内容过多时无法上下滑动问题 -->
		<scroll-view scroll-y="true" :style="{height: height + 'rpx'}" @scroll="scroll">
			<view class="components-bill-content-inner-container">
				<view class="bill-content-for-container" v-for="(item, index) in billDataVoList" :key="index">
					<!-- 上面的日期，时间，类型，金钱 -->
					<view class="components-bill-content-up-container">
						<view class="components-bill-content-up-left-container">
							<!-- 左边 日期 时间 -->
							<view class="components-bill-content-up-left-date">{{item.dayTimeStr}}</view>
							<view class="components-bill-content-up-left-week">{{item.dayForWeek}}</view>
						</view>
						<view class="components-bill-content-up-right-container" v-if="item.payMoney">
							<!-- 右边 类型 金钱 -->
							<view class="components-bill-content-up-right-type font-color-pay">支</view>
							<view class="components-bill-content-up-right-money">{{ "¥" + item.payMoney }}</view>
						</view>
						<view class="components-bill-content-up-right-container" v-if="item.incomeMoney">
							<!-- 右边 类型 金钱 -->
							<view class="components-bill-content-up-right-type font-color-income">收</view>
							<view class="components-bill-content-up-right-money">{{ "¥" + item.incomeMoney }}</view>
						</view>
					</view>
					<!-- 下面的图标，名字，金钱，图标，时间 -->
					<u-swipe-action style="width: 100%;">
						<u-swipe-action-item :options="options" @click="hanldeClick(arguments, item1, index)" v-for="(item1, index) in item.billList" :key="index">
						<view class="components-bill-content-down-container" >
							<!-- 左边 图标，名字 -->
							<view class="components-bill-content-down-left-container">
								<view class="components-bill-content-down-left-icon-container">
									<view class="components-bill-content-down-left-icon-bgc-container" :style="{backgroundColor: item1.categoryCircularColor}">
										<!-- 所属分类图标 -->
										<view :class="['components-bill-content-down-left-icon-content', 'iconfont', item1.categoryIcon]"></view>
									</view>
								</view>
								<view class="components-bill-content-down-left-name">{{item1.categoryName}}</view>
							</view>
							<!-- 右边 金钱，图标，时间 -->
							<view class="components-bill-content-down-right-container">
								<!-- 右上 金钱，图标 -->
								<view class="components-bill-content-down-right-up-container">
									<view :class="['components-bill-content-down-right-up-money', {'font-color-pay': item1.type == 'pay'}, {'font-color-income': item1.type == 'income'}]">
										{{item1.type == "pay" ? "-¥" + item1.money : item1.money}}
									</view>
									<view :class="['components-bill-content-down-right-up-icon-container', {'border-red': item1.type == 'pay'}, {'border-green': item1.type == 'income'}]">
										<view :class="['components-bill-content-down-right-up-icon', 'iconfont', item1.accountIcon]" :style="{color: item1.accountIconColor}"></view>
									</view>
								</view>
								<!-- 右下 时间 -->
								<view class="components-bill-content-down-right-down-name">{{item1.minuteSeconds}}</view>
							</view>
						</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</view>
		</scroll-view>
    </view>
</template>

<script>
    export default {
		name: 'billList',
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			billDataVoList: {
				type: Array,
				default: () => []
			},
			height: {
				type: Number,
				default: 700
			}
		},
        data() {
            return {
				options: [
					{
						name: 'edit',
						text: '编辑',
						style: {
							backgroundColor: '#463f84',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px',
							fontSize: '10px'
						}
					},
					{
						name: 'delete',
						text: '删除',
						style: {
							backgroundColor: '#e1555e',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px',
							fontSize: '10px'
						}
					},
				],
            }
        },
		methods: {
			/** 拖动事件，根据拖动距离和每个账单的距离，根据比例算出最上面显示的账单，然后修改具体月份的索引回显（后期升级时做）
			 * @param {Object} e 
			 */
			scroll(e) {
				console.log(e.detail.scrollTop, "数据");
			},
			/** 间隔250ms中点击两次视为 双击
			 * @param {Object} option 操作类型
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			hanldeClick(option, item, index){
				var operate = this.options[option[0].index].name;
				if (operate == "edit") {
					this.$emit("selectBill", item, index);
				} else {
					this.$emit("deleteBill", item, index);
				}
			},
		},
		mounted() {
			this.testList = [];
			for (var i = 0; i < 4; i++) {
				if (i % 2 == 0) {
					this.testList.push({
						id: i + 1,
						day: '5月9日',
						week: '周四',
						type: 'pay',
						money: '¥1231',
						itemList: [
							{id: i + 1, name: '测试1'},
							{id: i + 2, name: '测试2'},
						]
					})
				} else {
					this.testList.push({
						id: i + 1,
						day: '5月9日',
						week: '周四',
						type: 'pay',
						money: '¥1231',
						itemList: [
							{id: i + 2, name: '测试3'},
						]
					})
				}
			}
		},
    }
</script>

<style lang="scss">
	.components-bill-content-container {
		width: 100%;
		min-height: 160rpx;
		display: flex;
		flex-direction: column;
		
		.components-bill-content-inner-container {
			width: 100%;
			min-height: 160rpx;
			
			.bill-content-for-container {
				width: 100%;
				min-height: 160rpx;
				display: flex;
				flex-direction: column;
				
				.components-bill-content-up-container {
					width: 100%;
					height: 30%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.components-bill-content-up-left-container {
						width: 56%;
						height: 100%;
						font-weight: bold;
						font-size: 30rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						
						
						.components-bill-content-up-left-date {
							width: 140rpx;
							height: 100%;
							margin-right: 10rpx;
						}
						
						.components-bill-content-up-left-week {
							width: 100rpx;
							height: 100%;
						}
					}
					
					.components-bill-content-up-right-container {
						width: 12%;
						height: 100%;
						font-size: 27rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						// margin-right: 10rpx;
						
						.components-bill-content-up-right-type {
							// color: $typefaceRedColor;
							font-weight: 400;
							margin-right: 8rpx;
							
						}
						
						
						
						
						.components-bill-content-up-right-money {
							
						}
					}
					
				}
				
				.components-bill-content-down-container {
					margin-top: 10rpx;
					width: 100%;
					height: 80rpx;
					box-sizing: border-box;
					padding: 0rpx 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					// 以前的
					box-shadow: 0rpx 2rpx 1rpx #dfdede;
					border: 0.5rpx solid #dfdede;

					
					// background-color: white;
					// box-shadow: 0rpx 2rpx 1rpx #dfdede;	
					// border: 0.2rpx solid #F2F2F2;
					// box-shadow: rgba(100, 100, 111, 0.2) 0px 2px 5px 0px;
					// box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 5px;
					// box-shadow: rgba(100, 100, 111, 0.1) 0px 2px 2px 0px;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					
					.components-bill-content-down-left-container {
						background-color: white;
						width: 70%;
						height: 75rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					
						.components-bill-content-down-left-icon-container {
							
							width: 15%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							
							
							.components-bill-content-down-left-icon-bgc-container {
								width: 55rpx;
								height: 55rpx;
								border-radius: 50%;
								// background-color: $themeYellowColor;
								margin-right: 10rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								
								.components-bill-content-down-left-icon-content {
									font-size: 35rpx;
									color: white;
								}
								
							}
							
						}
						
						.components-bill-content-down-left-name {
							width: 70%;
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin-left: 10rpx;
							font-size: 27rpx;
						}
					}
					
					.components-bill-content-down-right-container {
						width: 30%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
						
						
						.components-bill-content-down-right-up-container {
							width: 100%;
							height: 40%;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							margin-right: 10rpx;
							
							.components-bill-content-down-right-up-money {
								font-size: 26rpx;
								// color: red;
								margin-right: 10rpx;
							}
							

							.components-bill-content-down-right-up-icon-container {
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								
								.components-bill-content-down-right-up-icon {
									font-size: 25rpx;
								}
								
							}
							
							.border-red {
								border: 1rpx solid $typefaceRedColor;
							}
							
							.border-green {
								border: 1rpx solid $typefaceGreenColor;
							}
							
							
						}
						
						.components-bill-content-down-right-down-name {
							width: 100%;
							height: 30%;
							display: flex;
							justify-content: flex-end;
							align-items: flex-start;
							font-size: 20rpx;
							color: $typefaceGreyColor;
						}
					}
				}
				
			}
		}
	}
	
	.font-color-pay {
		color: $typefaceRedColor;
		font-weight: bold;
	}
	
	.font-color-income {
		color: $typefaceGreenColor;
		font-weight: bold;
	}
</style>
